<template>
  <div>
    <el-card class="box-card">
      <el-form ref="queryFormRef" :model="queryInfo" size="small" :inline="true">
        <el-form-item label="姓名" prop="empName">
          <el-input
            v-model="queryInfo.empName"
            @keyup.enter.native="handleQuery"
            clearable
            placeholder="输入姓名"
          ></el-input>
        </el-form-item>

        <el-form-item label="选择部门" prop="deptId">
          <dept-select :value.sync="queryInfo.deptId" style="width:220px" />
        </el-form-item>

        <el-form-item label="选择岗位" prop="staId">
          <station-select :value.sync="queryInfo.staId" />
        </el-form-item>

        <el-form-item label="用工形式" prop="empType">
          <el-select v-model="queryInfo.empType" placeholder="选择用工形式">
            <el-option label="正式员工" :value="true"></el-option>
            <el-option label="临时员工" :value="false"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
          <el-button size="mini" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="employeeInfoList"
        tooltip-effect="dark"
        style="width: 100%;"
        v-loading="loading"
        :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" />
        <el-table-column prop="empName" label="真实姓名" />
        <el-table-column label="性别">
          <template slot-scope="scope">
            <span>{{ scope.row.sex === 1 ?'男': '女' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="最高学位">
          <template slot-scope="{row}">
            <span>{{ ['无学位','学士','双学士','硕士','博士','博士后'][row.highestEdu - 1] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="empPhone" label="手机号码" width="120px" />
        <el-table-column prop="department.deptName" label="部门名称" />
        <el-table-column prop="station.staName" label="岗位名称" />

        <el-table-column label="用工形式">
          <template slot-scope="scope">
            <span>{{ scope.row.empType ? '正式员工': '临时员工' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入职时间" width="140px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.empDate | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="人员来源">
          <template slot-scope="scope">
            <span>{{ ['校园招聘','社会招聘','其他'][scope.row.source - 1] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="text" @click="handleShowInfo(scope.row.id)" icon="el-icon-info">基本信息</el-button>
            <el-button
              type="text"
              @click="handleShowWork(scope.row.id)"
              icon="el-icon-suitcase"
            >就业信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="getEmployeeInfoList"
        @current-change="getEmployeeInfoList"
        :current-page.sync="queryInfo.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <el-dialog
      title="基本信息"
      :visible.sync="dialogVisible"
      width="1400px"
      @closed="handleInfoDialogClose"
    >
      <el-card>
        <el-row type="flex" justify="center">
          <el-col :span="18" :sm="18" :xs="24">
            <el-form
              :model="employeeForm"
              :rules="rules"
              ref="updateEmployeeForm"
              label-width="120px"
              :inline="true"
              size="small"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="员工姓名" prop="empName">
                    <el-input v-model="employeeForm.empName" placeholder="员工姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="employeeForm.sex">
                      <el-radio :label="1">男</el-radio>
                      <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="出生日期" prop="birth">
                    <el-date-picker
                      v-model="employeeForm.birth"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="出生日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证" prop="idCard">
                    <el-input v-model="employeeForm.idCard" placeholder="身份证"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="empPhone">
                    <el-input v-model="employeeForm.empPhone" placeholder="联系电话"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="employeeForm.email" placeholder="邮箱"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="选择部门" prop="deptId" :disabled="true">
                    <dept-select :value.sync="employeeForm.deptId" style="width:220px" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="选择岗位" prop="staId">
                    <station-select :value.sync="employeeForm.staId" :disabled="true"/>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="入职日期" prop="empDate">
                    <el-date-picker
                      v-model="employeeForm.empDate"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="入职日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="参加工作日期" prop="workDate">
                    <el-date-picker
                      v-model="employeeForm.workDate"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="参加工作日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="用工形式" prop="empType">
                    <el-radio-group v-model="employeeForm.empType">
                      <el-radio :label="true">正式员工</el-radio>
                      <el-radio :label="false">临时员工</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="人员来源" prop="source">
                    <el-select v-model="employeeForm.source" placeholder="人员来源">
                      <el-option label="校园招聘" :value="1"></el-option>
                      <el-option label="社会招聘" :value="2"></el-option>
                      <el-option label="其他" :value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否需要试用期" prop="isInternship">
                    <el-radio-group v-model="employeeForm.isInternship">
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="试用期范围" v-if="employeeForm.isInternship">
                    <el-date-picker
                      v-model="internshipDate"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      class="date-range"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="政治面貌" prop="politics">
                    <el-select v-model="employeeForm.politics" placeholder="政治面貌">
                      <el-option label="党员" :value="1"></el-option>
                      <el-option label="预备党员" :value="2"></el-option>
                      <el-option label="团员" :value="3"></el-option>
                      <el-option label="其他" :value="4"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="民族" prop="folk">
                    <el-input v-model="employeeForm.folk" placeholder="民族"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="籍贯" prop="nation">
                    <place-cascader :value.sync="employeeForm.nation" placeholder="籍贯" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身高" prop="height">
                    <el-input
                      class="append-input"
                      type="number"
                      v-model.number="employeeForm.height"
                      placeholder="身高"
                    >
                      <template slot="append">cm</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="血型" prop="blood">
                    <el-select v-model="employeeForm.blood" placeholder="血型">
                      <el-option label="A型" :value="1"></el-option>
                      <el-option label="B型" :value="2"></el-option>
                      <el-option label="AB型" :value="3"></el-option>
                      <el-option label="O型" :value="4"></el-option>
                      <el-option label="其他" :value="5"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="婚姻状况" prop="maritalStatus">
                    <el-select v-model="employeeForm.maritalStatus" placeholder="婚姻状况">
                      <el-option label="未婚" :value="1"></el-option>
                      <el-option label="已婚" :value="2"></el-option>
                      <el-option label="离婚" :value="3"></el-option>
                      <el-option label="丧偶" :value="4"></el-option>
                      <el-option label="其他" :value="5"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="出生地" prop="birthPlace">
                    <place-cascader :value.sync="employeeForm.birthPlace" placeholder="出生地" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="户口所在地" prop="registeredPlace">
                    <place-cascader :value.sync="employeeForm.registeredPlace" placeholder="户口所在地" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="最高学历" prop="highestEdu">
                    <el-select v-model="employeeForm.highestEdu" placeholder="最高学历">
                      <el-option label="高中以下" :value="1"></el-option>
                      <el-option label="大专" :value="2"></el-option>
                      <el-option label="本科" :value="3"></el-option>
                      <el-option label="研究生" :value="4"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="最高学位" prop="highestDegree">
                    <el-select v-model="employeeForm.highestDegree" placeholder="最高学位">
                      <el-option label="无学位" :value="1"></el-option>
                      <el-option label="学士" :value="2"></el-option>
                      <el-option label="双学士" :value="3"></el-option>
                      <el-option label="硕士" :value="4"></el-option>
                      <el-option label="博士" :value="5"></el-option>
                      <el-option label="博士后" :value="6"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="毕业院校" prop="graSchool">
                    <el-input v-model="employeeForm.graSchool" placeholder="毕业院校"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="专业" prop="speciality">
                    <el-input v-model="employeeForm.speciality" placeholder="专业"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="毕业时间" prop="graDate">
                    <el-date-picker
                      v-model="employeeForm.graDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="毕业时间"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
          <el-col :span="3.5">
            <el-upload
              :class="{'avatar-uploader': true, 'none-border': employeeForm.empAvatar!==undefined}"
              :action="baseUrl + '/upload/single/1'"
              :headers="{Authorization: token}"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="employeeForm.empAvatar" :src="employeeForm.empAvatar" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div style="text-align:center;font-size:14px;color:#ccc">员工头像</div>
          </el-col>
        </el-row>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="SubmitUpdate">保存更改</el-button>
      </span>
    </el-dialog>

    <!-- 工作经历对话框 -->
    <el-dialog
      title="就业信息"
      :visible.sync="dialogVisible2"
      width="800px"
      @closed="handleEmpInfoClose"
    >
      <el-card>
        <el-row type="flex" justify="center">
          <el-col :span="24" :sm="24" :xs="24">
            <el-form
              ref="EmployeeInfoFormRef"
              label-width="110px"
              size="small"
              :inline="true"
              :model="employInfoForm"
              :rules="employInfoFormRules"
              :disabled="employInfoFormDisable"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="外国语种" prop="language">
                    <el-input placeholder="输入外国语种" v-model="employInfoForm.language"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="熟练程度" prop="degree">
                    <el-select placeholder="选择熟练程度" v-model="employInfoForm.degree">
                      <el-option label="掌握" :value="1"></el-option>
                      <el-option label="熟练" :value="2"></el-option>
                      <el-option label="精通" :value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="关系" prop="memRelation">
                    <el-select placeholder="请选择关系" v-model="employInfoForm.memRelation">
                      <el-option label="父亲" :value="1"></el-option>
                      <el-option label="母亲" :value="2"></el-option>
                      <el-option label="配偶" :value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="亲属姓名" prop="memName">
                    <el-input placeholder="输入亲属姓名" v-model="employInfoForm.memName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="亲属职业" prop="memPosition">
                    <el-input placeholder="输入亲属职业" v-model="employInfoForm.memPosition"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="亲属单位" prop="memCompany">
                    <el-input placeholder="输入亲属单位" v-model="employInfoForm.memCompany"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="亲属联系方式" prop="memPhone" class="phone">
                    <el-input placeholder="输入联系方式" v-model="employInfoForm.memPhone"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="曾在单位名称" prop="company">
                    <el-input placeholder="输入单位名称" v-model="employInfoForm.company"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="从事工作内容" prop="jobContent">
                    <el-input placeholder="输入工作内容" v-model="employInfoForm.jobContent"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="担任职务" prop="position">
                    <el-input placeholder="输入单位名称" v-model="employInfoForm.position"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="年薪/月薪" prop="salary">
                    <el-input
                      placeholder="输入薪资"
                      v-model.number="employInfoForm.salary"
                      type="number"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="证明人" prop="prove">
                    <el-input placeholder="输入证明人姓名" v-model="employInfoForm.prove"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="证明人职务" prop="proPosition">
                    <el-input placeholder="输入证明人职务" v-model="employInfoForm.proPosition"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="证明人联系方式" prop="proPhone" class="proPhone">
                    <el-input placeholder="输入证明人联系方式" v-model="employInfoForm.proPhone"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="起止时间" prop="workDate">
                    <el-date-picker
                      v-model="employInfoForm.workDate"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      class="date-range"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="employInfoForm.remark"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleEdit">编辑</el-button>
        <el-button type="primary" @click="handleSubmitEmployeeInfo">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listEmployeeInfo,
  updateEmployee,
  getEmployeeById,
} from "@/api/employee";
import { getEmpInfoById, saveOrUpdateEmpInfo } from "@/api/empInfo";
import { getInternshipByEmpId } from "@/api/internship";
import { base_url } from "@/api/apiConfig";
export default {
  name: "EmployeeInfoCenter",
  data() {
    return {
      queryInfo: {
        // 当前页
        pageNum: 1,
        // 页大小
        pageSize: 10,
        empName: undefined,
        deptId: undefined,
        staId: undefined,
        empType: undefined,
      },
      employInfoFormDisable: true,
      employeeInfoList: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      dialogVisible2: false,
      // employee: {},
      employeeForm: {
        // 员工名
        empName: undefined,
        // 性别，1男，2女，默认1
        sex: undefined,
        // 生日
        birth: undefined,
        // 身份证
        idCard: undefined,
        // 所属部门
        deptId: undefined,
        // 所属岗位
        staId: undefined,
        // 入职时间
        empDate: undefined,
        // 参加工作日期
        workDate: undefined,
        // 用工形式1：正式员工，2：临时员工；默认1
        empType: undefined,
        // 联系电话
        empPhone: undefined,
        // 邮箱
        email: undefined,
        // 人员来源1：校园招聘2：社会招聘3：其它;默认1
        source: undefined,
        // 政治面貌1党员2：预备党员3：团员4：其他，默认1
        politics: undefined,
        // 民族
        folk: undefined,
        // 籍贯
        nation: undefined,
        // 身高，单位cm
        height: undefined,
        // 血型，1：A型,2:B型，3：AB型，4：O型，5：其他，默认1
        blood: undefined,
        // 婚姻状况，1：未婚，2：已婚，3：离婚，4：丧偶,5:其他，默认1
        maritalStatus: undefined,
        // 出身地
        birthPlace: undefined,
        // 户口所在地
        registeredPlace: undefined,
        // 最高学历,1高中以下，2大专，3本科，4研究生，默认1
        highestEdu: undefined,
        // 最高学位，1无学位，2学士，3双学士，4硕士，5博士，6博士后；默认1
        highestDegree: undefined,
        // 毕业院校
        graSchool: undefined,
        // 专业
        speciality: undefined,
        // 毕业时间
        graDate: undefined,
        // 状态，0离职，1在职，默认为1
        status: undefined,
        // 是否是实习生，0不是，1是，默认1
        isInternship: undefined,
        // 头像
        empAvatar: undefined,
      },
      employInfoForm: {
        language: undefined,
        degree: undefined,
        memRelation: undefined,
        memName: undefined,
        memPosition: undefined,
        memCompany: undefined,
        memPhone: undefined,
        company: undefined,
        jobContent: undefined,
        position: undefined,
        salary: undefined,
        startDate: undefined,
        endDate: undefined,
        prove: undefined,
        proPosition: undefined,
        proPhone: undefined,
        remark: undefined,
        workDate: undefined,
        empId: undefined,
      },
      internshipDate: undefined,
      imageUrl: "",
      baseUrl: base_url,
      rules: {
        empName: [{ required: true, message: "名字不能为空", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        birth: [
          {
            required: true,
            type: "string",
            message: "请填写生日",
            trigger: "blur",
          },
        ],
        idCard: [
          { required: true, message: "请填写身份证", trigger: "blur" },
          // eslint-disable-next-line no-useless-escape
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请填写正确的身份证",
            trigger: "blur",
          },
        ],
        empPhone: [
          { required: true, message: "请填写手机号码", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请填写正确的手机号码",
            trigger: "blur",
          },
        ],
        email: [
          { type: "email", message: "请填写正确的邮箱", trigger: "blur" },
        ],
        deptId: [
          { required: true, message: "请为员工分配部门", trigger: "blur" },
        ],
        staId: [
          { required: true, message: "请为员工分配部门", trigger: "blur" },
        ],
        empDate: [
          {
            required: true,
            type: "string",
            message: "请填写入职时间",
            trigger: "blur",
          },
        ],
        workDate: [
          {
            required: true,
            type: "string",
            message: "请填写工作时间",
            trigger: "blur",
          },
        ],
        empType: [
          { required: true, message: "请选择用工形式", trigger: "blur" },
        ],
        source: [
          { required: true, message: "请选择人员来源", trigger: "blur" },
        ],
      },
      employInfoFormRules: {
        startDate: [
          {
            required: true,
            type: "string",
            message: "请填写工作时间",
            trigger: "blur",
          },
        ],
        workDate: [
          {
            required: true,
            message: "请填写工作时间",
            trigger: "blur",
          },
        ],
        language: [
          {
            required: true,
            type: "string",
            message: "请填写外国语种",
            trigger: "blur",
          },
        ],
        memRelation: [
          {
            required: true,
            type: "number",
            message: "请填写亲属关系",
            trigger: "blur",
          },
        ],
        memName: [
          {
            required: true,
            type: "string",
            message: "请填写亲属姓名",
            trigger: "blur",
          },
        ],
        proPhone: [
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请填写正确的手机号码",
            trigger: "blur",
          },
        ],
        memPhone: [
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请填写正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getEmployeeInfoList();
  },
  computed: {
    token() {
      return this.$store.state.userModule.token;
    },
  },
  methods: {
    async getEmployeeInfoList() {
      this.loading = true;
      let resp = await listEmployeeInfo(this.queryInfo);
      if (resp.code === 200) {
        let { data } = resp;
        this.total = data.total;
        this.employeeInfoList = data.employees;
      }
      this.loading = false;
    },
    handleSelectionChange() {},
    async handleShowInfo(id) {
      let { code, data } = await getEmployeeById(id);
      if (code === 200) {
        this.employeeForm = data;
        if (data.isInternship) {
          let resp = await getInternshipByEmpId(data.id);
          if (resp.code === 200) {
            const data = resp.data;
            this.internshipDate = [data.startDate, data.endDate];
          }
        }
      }
      this.dialogVisible = true;
    },
    async handleShowWork(id) {
      this.dialogVisible2 = true;
      let { code, data } = await getEmpInfoById(id);
      if (code === 200) {
        if (data) {
          this.employInfoForm = data;
          this.employInfoForm.workDate = [data.startDate, data.endDate];
        } else {
          this.employInfoForm.empId = id;
        }
      }
    },
    handleAvatarSuccess(res) {
      this.employeeForm.empAvatar = res.data.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 关键字查询
    handleQuery() {
      this.queryInfo.pageNum = 1;
      console.log(this.queryInfo);
      this.getEmployeeInfoList();
    },
    // 重置表单
    handleReset() {
      this.$refs.queryFormRef.resetFields();
      console.log(this.queryInfo);
      this.getEmployeeInfoList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    SubmitUpdate() {
      this.$refs.updateEmployeeForm.validate(async (valid) => {
        if (!valid) {
          return;
        }
        let internshipStartDate;
        let internshipEndDate;
        if (this.employeeForm.isInternship) {
          [internshipStartDate, internshipEndDate] = this.internshipDate;
        }

        let resp = await updateEmployee(
          this.employeeForm,
          internshipStartDate,
          internshipEndDate
        );
        if (resp.code === 200) {
          this.$message.success("更新信息成功！");
          this.dialogVisible = false;
          this.resetForm("updateEmployeeForm");
          this.getEmployeeInfoList();
        }
      });
    },
    handleInfoDialogClose() {
      this.employeeForm = {};
      this.internshipDate = undefined;
    },
    handleSubmitEmployeeInfo() {
      this.$refs.EmployeeInfoFormRef.validate(async (valid) => {
        if (!valid) return;
        else {
          [
            this.employInfoForm.startDate,
            this.employInfoForm.endDate,
          ] = this.employInfoForm.workDate;
          if (!this.employInfoFormDisable) {
            const { code } = await saveOrUpdateEmpInfo(this.employInfoForm);
            if (code === 200) {
              this.$message("保存成功！");
              this.dialogVisible2 = false;
            }
          }
        }
      });
    },
    handleEmpInfoClose() {
      this.resetForm("EmployeeInfoFormRef");
      this.employInfoFormDisable = true;
    },
    handleEdit() {
      this.employInfoFormDisable = false;
    },
  },
};
</script>

<style scoped lang="scss">
.el-pagination {
  margin: 18px 0px;
  float: right;
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .none-border .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 130px;
  height: 148px;
  object-fit: cover;
  display: block;
}
.phone {
  width: 100%;
  display: flex;
}
</style>
<style lang="scss">
.phoen {
  .el-form-item_content {
    flex: 1 !important;
  }
}
</style>